<template>
	<Teleport to="body">
		<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
			<div class="onex-loading-container" v-show="data.show">
				<div class="onex-loading-mask">
					<div class="onex-loading-background" v-if="data.model != 'progress' && data.show">
						<div class="onex-loading-spinner">
							<svg viewBox="25 25 50 50" class="circular">
								<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
							</svg>
						</div>
						<div class="onex-loading-text">{{ data.text }}</div>
					</div>
					<div class="onex-progress-content"	v-if="data.model == 'progress' && data.show">
						<div class="onex-Loading-progress"></div>
						<div class="onex-loading-text">{{ data.text }}</div>
					</div>
				</div>
			</div>
		</transition>
	</Teleport>
</template>

<script setup>
import { reactive, defineProps, defineEmits, defineExpose } from 'vue';
const emits = defineEmits(['onShow',"onHide","onClose"]);

const data = reactive({show:false,timeOutId:null,text:"加载中...",model:"progress"});

const show = function(str,t = -1, model = "") {
	if(str!=null) {
		data.text = str;
	} 
	data.show = true;
	data.model = model;
	emits('onShow');
	// 超时自动关闭
	data.timeOutId = setTimeout(() => {
		console.log('Loading 超时将自动关闭(全局超时时间 15000ms)......');
		data.show = false;
	}, (t > 0 ? (t * 1000):(15000)));
}

const hide = function(){
	data.show = false;
	if(data.timeOutId != null){
		clearTimeout(data.timeOutId);
	}
	emits('onHide');
}

const close = function() {
	data.show = false;
	if(data.timeOutId != null){
		clearTimeout(data.timeOutId);
	}
	emits('onClose');
}

defineExpose({
	show,
	hide,
	close
});
</script>

<style scoped>
.onex-loading-container {
	
}
.onex-loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	background-color: var(--mask-color, rgba(0, 0, 0, 0.15));
}

.onex-loading-timer {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 76px;
	font-weight: 400;
}

.onex-progress-content {
	position: fixed;
	top:50%;
	left:50%;
	-ms-transform:translate(-50%,-50%); /* IE 9 */
	-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.onex-loading-background {
	position: fixed;
	top:50%;
	left:50%;
	-ms-transform:translate(-50%,-50%); /* IE 9 */
	-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.onex-loading-spinner {

}
.onex-loading-spinner .circular {
	height: 2rem;
	width: 2rem;
	animation: loading-rotate 2s linear infinite;
}
.onex-loading-spinner .path {
	animation: loading-dash 1.5s ease-in-out infinite;
	stroke-dasharray: 90, 150;
	stroke-dashoffset: 0;
	stroke-width: 2;
	stroke: #409eff;
	stroke-linecap: round;
}
.onex-loading-text {
	font-size: 1rem;
	color: rgba(255,255,255,0.8);
	margin-left: 1rem;
}

.onex-Loading-progress {
	height: 5px;
	width: 350px;
	border-radius: 3px;
	background: linear-gradient(
		90deg,
		red 0%,
		yellow 15%,
		lime 30%,
		cyan 50%,
		blue 65%,
		magenta 80%,
		red 100%
	);
	background-size: 200%;
	animation: moveGradient 3s linear infinite;
}
</style>
<style>
@keyframes moveGradient {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: -200% 0%;
	}
}

@keyframes loading-rotate {
	100% {
		transform: rotate(360deg);
	}
}
@keyframes loading-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -40px;
	}

	to {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -120px;
	}
}
</style>
